<!--基本html代码区域-->
<template>
<el-container class="elContainer">
  <el-header>
    <el-row type="flex" justify="center">
      <el-col :span="2" :offset="8" class="registerLogo">
        <lottie-player
            src="https://assets1.lottiefiles.com/private_files/lf30_kcohh4m7.json"
            background="transparent"
            speed="1"
            class="registerLogoContent"
            loop
            autoplay>
        </lottie-player>
      </el-col>
      <el-col :span="4" class="registerContext">
        <h1>欢迎注册！</h1>
      </el-col>
    </el-row>
  </el-header>
  <el-main heigth="90%">
    <div class="registerForm">
    <el-form ref="form" :model="form" label-width="20%">
      <el-row type="flex" justify="center">
        <el-col :span="8">
          <el-form-item label="用户名" prop="username" required>
            <el-input v-model="form.username"
                      size="small"
                      placeholder="请输入用户名，可用于登录">
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row type="flex" justify="center">
        <el-col :span="8">
          <el-form-item label="用户昵称" prop="name" required>
            <el-input v-model="form.nickname"
                      size="small"
                      placeholder="请输入用户昵称">
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row type="flex" justify="center">
        <el-col :span="8">
          <el-form-item label="密码" prop="password" required>
            <el-input v-model="form.password"
                      size="small"
                      type="password"
                      placeholder="请输入8位以上登录密码，需包含字母大小写，数字，特殊符号(.,@,*,$,%)中的两种">
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row type="flex" justify="center">
        <el-col :span="8">
          <el-form-item label="确认密码" prop="confirmPwd" required>
            <el-input v-model="form.confirmPwd"
                      size="small" type="password"
                      placeholder="请输入确认密码">
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row type="flex" justify="center">
        <el-col :span="8">
          <el-form-item label="头像地址" prop="avatar">
            <el-input v-model="form.avatar"
                      size="small"
                      placeholder="请输入用户头像地址">

            </el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row type="flex" justify="center">
        <el-col :span="8">
          <el-form-item label="邮箱地址" prop="email" required>
            <el-input v-model="form.email"
                      size="small"
                      type="email"
                      placeholder="请输入用户邮箱地址">

            </el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row type="flex" justify="center">
        <el-col :span="8">
          <el-form-item label="电话号码" prop="phoneNum" required>
            <el-input v-model="form.phoneNum"
                      size="small"
                      type="number"
                      placeholder="请输入用户电话号码"
                      :disabled="disabled"
                      @mousewheel.native.prevent>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row type="flex" justify="center">
        <el-col :span="8">
          <el-form-item label="性别" prop="gender" required>
            <el-input v-model="form.gender"
                      size="small"
                      type="number"
                      aria-valuemax="1"
                      placeholder="请输入用户性别"
                      :disabled="disabled"
                      @mousewheel.native.prevent
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row type="flex" justify="center">
        <el-col :span="8">
          <el-form-item label="备注信息" prop="remark">
            <el-input v-model="form.remark"
                      size="small"
                      type="text"
                      placeholder="进行一些备注说明"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row type="flex" justify="center">
        <el-col :span="8" align="center">
          <el-form-item>
            <el-button @click="register">注册</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

  </div>
  </el-main>
</el-container>

</template>


<!--数据存贮交互，事件控制地区-->
<script>

import {Register} from "@/api/register/register";
import BackGroundImg from '@/assets/images/1.jpg';

export default {
  name: 'registerForm',
  data() {
    return {
      form: {
        username: "",
        nickname: "",
        password: "",
        confirmPwd: "",
        avatar: "",
        email: "",
        phoneNum: "",
        gender: 0,
        remark: ""
      },
      backImage: {
        url: BackGroundImg,
        title: "注册背景"
      }
    }
  },
  methods: {
    /*提交进行判断的函数 */
    submit: function () {
      if (this.form.name === "张三" && this.form.password === "123456") {
        alert("登陆成功")
        this.$router.push({path: "/home"});
      } else
        alert("账号或密码错误")
    },
    register: function () {
      alert("注册信息为：" + JSON.stringify(this.form))
      Register(this.form)
          .then((response) => {
            alert("注册成功: " + JSON.stringify(response))
            // resultCheck(response, true);
      });
    },
  },
}

</script>
<style>
.el-form-item__label {
color: white;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
input[type='number'] {
  -moz-appearance: textfield;
}

</style>
<!-- 写样式的地方 -->
<style scoped>
.registerContext{
  height: 20%;
  width: 80%;
  color: white;
}

.registerLogo{
  height: 20%;
  width: 20%;
}

.registerLogoContent{
  height: 60%;
  width: 60%;
  margin: -10% auto;
}

.elContainer{
  height: 100%;
  background-repeat: no-repeat;
  background-image: url("../../assets/images/1.jpg");
  animation:change 30s infinite;
}

@keyframes change {
  0%{
    background-image: url("../../assets/images/1.jpg");
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  33%{
    background-image: url("../../assets/images/2.jpg");
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  66%{
    background-image: url("../../assets/images/3.jpg");
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  100%{
    background-image: url("../../assets/images/4.jpg");
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
}

</style>